#app {
  .wrapper {
    &:extend(width-height);
  }
  .wrap_content{
    width: 100%;
    height: calc(100% - 50px );
    // padding-top: 50px;
  }
  .main{
    // margin-left: 223px;
    height: calc(100% - 50px );
    min-width: calc(1280px - 200px );
  }
}
#app {
  .sideBar{
    // width: @sideBarWidth;
    height: calc(100% - 50px);
    background-color: @sideBar_bgc;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transition: width 0.3s;
    z-index: 999;
    .el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap{
        overflow-x: hidden !important;
      }
    }
    .el-menu {
      &:extend(width-height);
      border: none;
    }
  }
}

.header {
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 999;
  background: #f7f7f7;
}
// collapse
#app {
  .closeBar {
    .sideBar {
      width: 64px !important;
      .el-menu--collapse > .sideItem .el-menu-item [class^='el-icon-'],
      .el-menu--collapse
        > .sideItem
        .el-submenu
        > .el-submenu__title
        [class^='el-icon-'] {
        margin: 0;
        vertical-align: middle;
        width: 24px;
        text-align: center;
      }
      .el-menu--collapse > .sideItem .el-menu-item span,
      .el-menu--collapse > .sideItem .el-submenu > .el-submenu__title span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
      .el-menu--collapse > .sideItem .el-menu-item .el-submenu__icon-arrow,
      .el-menu--collapse
        > .sideItem
        .el-submenu
        > .el-submenu__title
        .el-submenu__icon-arrow {
        display: none;
      }
    }
    .main {
      // margin-left: 64px;
      min-width: calc(1280px - 64px );


    }
  }
}
